<template>
	<view v-if="list.length>0">
		<template v-for="item in list">
			<view v-if="item.Type==1">
				<view :class="'title ' + (item.IsRequired?'pink':'')">{{item.Name}}</view>
				<view class="panel">
					<picker @change="Change($event,item.TemplateNum)" :value="Util.findIndex(item)" :range="item.TemplateTagOptionList" range-key="Name">
						<view class="uni-input">
							{{item.TemplateTagOptionList[Util.findIndex(item)].Name}} <input :name="item.TemplateName" class="hidden" :value="item.DefaultValue"></input>
						</view>
					</picker>
				</view>
			</view>
			<view v-if="item.Type==2">
				<view :class="'title ' + (item.IsRequired?'pink':'')">{{item.Name}}</view>
				<view class="panel">
					<input :name="'Template'+item.TemplateNum" :placeholder="'请输入'+item.Name" :value="item.DefaultValue" placeholder-style="color:#bcbcbc"></input>
				</view>
			</view>
			<view class="cu-form-group" v-if="item.Type==3">
				<view :class="'longtitle ' + (item.IsRequired?'pink':'')">{{item.Name}}</view>
				<view class="panel">
					<textarea :name="'Template'+item.TemplateNum" :placeholder="'请输入'+item.Name" :value="item.DefaultValue" maxlength="-1"></textarea>
				</view>
			</view>
			<view class="cu-form-group moreline" v-if="item.Type==4">
				<view :class="'title ' + (item.IsRequired?'pink':'')">{{item.Name}}</view>
				<view class="panel">
					<radio-group :name="'Template'+item.TemplateNum">
						<template v-for="o in item.TemplateTagOptionList">
							<view class="row">
								<label><radio :value="o.Name" style="transform:scale(0.7)" :checked="item.DefaultValue==o.Name?true:false"/><text style="padding-left:0rpx; padding-right:30rpx;">{{o.Name}}</text></label>
							</view>
						</template>
					</radio-group>
				</view>
			</view>
			<view class="moreline" v-if="item.Type==5">
				<view :class="'title ' + (item.IsRequired?'pink':'')">{{item.Name}}</view>
				<view class="panel" style="margin-left:-10rpx;">
					<checkbox-group @change="CheckChange($event,item.TemplateNum)">
						<label v-for="o in item.TemplateTagOptionList" class="checklabel">
							<view class="checkbox"><checkbox :value="o.Name" :checked="Util.isCheck(item.DefaultValue,o.Name)" :class="'blue '+ (Util.isCheck(item.DefaultValue,o.Name)?'checked':'')" style="transform:scale(0.7)" /></view><view class="checktxt">{{o.Name}}</view>
						</label>
					</checkbox-group>
					<input :name="item.TemplateName" class="hidden" :value="item.DefaultValue"></input>
				</view>
			</view>
			<view class="cu-form-group" v-if="item.Type==6">
				<view :class="'title ' + (item.IsRequired?'pink':'')">{{item.Name}}</view>
				<view class="panel">
					<picker :name="item.TemplateName" mode="date" :value="item.DefaultValue" @change="DateChange($event,item.TemplateNum)">
						<view class="uni-input">{{item.DefaultValue}}</view>
					</picker>
				</view>
			</view>
			<view class="cu-form-group" v-if="item.Type==7">
				<view :class="'title ' + (item.IsRequired?'pink':'')">{{item.Name}}</view>
				<view class="panel">
					<uni-timepicker :name="item.TemplateName" fields="minute" :placeholder="'请选择'+item.Name" :defaultValue="item.DefaultValue"></uni-timepicker>
				</view>
			</view>
			<view class="cu-form-group" v-if="item.Type==8">
				<view :class="'title ' + (item.IsRequired?'pink':'')">{{item.Name}}</view>
				<view class="panel">
					<input :name="'Template'+item.TemplateNum" type="number" :placeholder="'请输入'+item.Name" :value="item.DefaultValue"></input>
				</view>
			</view>
			<view class="cu-form-group" v-if="item.Type==9">
				<view :class="'title ' + (item.IsRequired?'pink':'')">{{item.Name}}</view>
				<view class="panel">
					<input :name="'Template'+item.TemplateNum" type="digit" :placeholder="'请输入'+item.Name" :value="item.DefaultValue"></input>
				</view>
			</view>
		</template>
	</view>
</template>
<script module="Util" lang="wxs">
	var findIndex=function(item){
		if(item.DefaultValue==""){
			return 0;
		}
		var index=0;		
		for(var i=0;i<item.TemplateTagOptionList.length;i++){
			if(item.TemplateTagOptionList[i].Name==item.DefaultValue){
				return index;
			}
			index++;
		}
		return 0;
	}
	var isCheck=function(str, val){
		if(str.split(',').indexOf(val)>-1){
			return true;
		}else{
			return false;
		}
	}
	module.exports = {
	  findIndex:findIndex,
	  isCheck:isCheck
	};
	
</script>
<script>
	export default {
		props:{
			list: {
				type: Array,
				default:[]
			}
		},
		data() {
			return {
				
			};
		},
		methods:{
			Change(e, TemplateNum){
				var index=0;
				this.list.forEach(item=>{
					if(item.TemplateNum==TemplateNum){
						item.DefaultValue=item.TemplateTagOptionList[e.detail.value].Name;
						this.list[index]=item;
					}
					index++;
				});
			},
			DateChange(e, TemplateNum){
				var index=0;
				this.list.forEach(item=>{
					if(item.TemplateNum==TemplateNum){
						item.DefaultValue=e.detail.value;
						this.list[index]=item;
					}
					index++;
				});
			},
			CheckChange(e, TemplateNum){
				var index=0;
				this.list.forEach(item=>{
					if(item.TemplateNum==TemplateNum){
						item.DefaultValue=e.detail.value.join(",");
						this.list[index]=item;
					}
					index++;
				});
			}
		}
	}
</script>

<style lang="scss">
	radio-group{display: flex; flex-direction: row; flex-wrap:wrap;
		.row{min-width:33%;}
	}
	.panel{padding-bottom:20rpx;
		input{ font-size:32rpx;}
	}
	.uni-input{font-size:32rpx;}
	.uni-label-pointer{font-size:32rpx;}
	checkbox-group{display: flex; flex-direction: row;}
	.checklabel{display: flex; flex-direction: row; }
	.checkbox{width:auto;}
	.checktxt{height:54rpx; line-height: 54rpx;}
</style>
